<template>
  <div id="couponManagement">
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:couponManagement:add'"
        type="warning"
        icon="el-icon-plus"
        @click="showDialog()"
      >
        添加优惠券
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="couponName"
        label="优惠券名称"
        min-width="150"
      ></el-table-column>
      <el-table-column prop="couponType" label="优惠券类型" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.couponType | filterName('coupon_types') }}
        </template>
      </el-table-column>
      <el-table-column prop="issueType" label="发放类型" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.issueType | filterName('grant_types') }}
        </template>
      </el-table-column>
      <el-table-column label="有效期" min-width="280">
        <template slot-scope="scope">
          {{ getValidity(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="添加时间"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="user.userName"
        label="发放人"
        width="130"
      ></el-table-column>
      <el-table-column prop="projectNames" label="关联项目" width="130">
        <template slot-scope="scope">
          <ul v-for="(item, index) in scope.row.projectNames" :key="index">
            <li>{{ item ? item : '--' }}</li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="changeView(scope.row.id)"
            v-permission="'wh:couponManagement:checkDetail'"
          >
            查看明细
          </el-button>
          <el-button
            type="text"
            @click="showDialog(scope.row)"
            v-permission="'wh:couponManagement:Edit'"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            v-if="!scope.row.isTop && scope.row.issueType === 'GOODS'"
            style="color:#B8741A;"
            @click="handleCouponsTop(scope.row.id)"
          >
            置顶
          </el-button>
          <el-button
            type="text"
            v-else-if="scope.row.issueType === 'GOODS'"
            style="color:#B8741A;"
            @click="handleCouponsDown(scope.row.id)"
          >
            取消置顶
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 修改积分弹窗 -->
    <editDialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @refresh="refresh"
    ></editDialog>
  </div>
</template>
<script>
import topSearch from '@component/intergralManagement/couponManagement/topSearch' // 上部搜索条件
import editDialog from '@component/intergralManagement/couponManagement/editDialog' // 编辑弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getCoupons,
  collegesUpShelf,
  collegesDownShelf,
  couponsTop,
  couponsDown
} from '@/api/couponsIntegral/coupons' // 接口

export default {
  name: 'couponManagement',
  msg: '优惠券管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    editDialog
  },
  data() {
    return {
      loading: false,
      total: 0,
      // 搜索条件
      formInline: {
        couponName: '', // 优惠券名称
        grantType: '', // 发放类型
        projectNames: [], //关联项目
        userId: '', // 发放人
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给编辑弹框的数据
      editDialogData: {
        isShow: false, // 控制弹框显示
        params: {}, // 参数
        id: '' // 参数
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      let params = obj
      getCoupons(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 有效期显示 */
    getValidity(row) {
      let str = ''
      switch (row.issueType) {
        case 'ARTIFICIAL':
          //人工发放
          str = `${row.startTime} 至 ${row.endTime}`
          break
        case 'ACTIVITY':
          //活动发放
          str = `${row.validity}天`
          break
        case 'SYSTEM':
          //系统发放
          str = `${row.validity}天`
          break
        case 'PUBLIC':
          //公用发放
          str = `${row.startTime} 至 ${row.endTime}`
          break
        case 'GOODS':
          //活动发放
          str = `${row.validity}天`
          break
      }
      return str
    },
    // 编辑
    showDialog(params = {}) {
      this.editDialogData.isShow = true // 显示编辑弹框
      this.editDialogData.params.id = params.id
      this.editDialogData.params.type = params.issueType
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 跳转页面 */
    changeView(id) {
      let query = {
        couponId: id
      }
      this.$router.push({
        name: 'wh:couponManagement:secondList',
        // params: { id },
        query: query
      })
    },
    /*商品发优惠券顶置*/
    handleCouponsTop(couponId) {
      couponsTop(
        couponId,
        (response) => {
          this.loading = false
          this.$message({
            message: '置顶成功',
            type: 'success'
          })
          this.searchList()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /*商品发放优惠券取消顶置*/
    handleCouponsDown(couponId) {
      couponsDown(
        couponId,
        (response) => {
          this.loading = false
          this.$message({
            message: '取消置顶成功',
            type: 'success'
          })
          this.searchList()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 编辑后，刷新列表 */
    refresh() {
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#batchList {
}
</style>
